<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./fabric.js"></script>
</head>
<body>
  <canvas id="c" width="800" height="800" style="border: 1px solid #ccc;"></canvas>


  <canvas id="d" width="800" height="800"></canvas>
  <script>
    // 初始化画布
    const canvas = new fabric.Canvas('c')


    // fabric.Image.fromURL('./img.png', function(img) {
    //   var oImg = img
    //     .set({
    //       left: 0,//水平位置
    //       top:0,
    //       scaleX: 1.2,//水平缩放
    //       scaleY: 1.2,//垂直缩放
    //       originX: 'center',//平移的水平起始点 "left"|"right"|"center"
    //       originY: 'left',//平移的垂直起始点 "left"|"right"|"center"
    //     })
      
    //   canvas.add(img)
    // });

    // 将画布设置成绘画模式
    canvas.isDrawingMode = true

    canvas.freeDrawingBrush.width = 26

    canvas.freeDrawingBrush.color = '#f700a599'
    canvas.freeDrawingBrush.limitedToCanvasSize = true

    
    var path = new fabric.Path('M 24 26 L 117 84 Q 110 18.5 103 14 Q 98.5 10.5 94 7 Q 93.5 -0.5 93 -8');
    path.set({ left: 120, top: 120 });
    canvas.add(path);


    function getAllPaths() {
      const paths = canvas.getObjects().filter(obj => obj.type === 'path');
      console.log('画布上的所有路径:', paths);
      return paths;
    }
    
    canvas.on('mouse:up', function() {
      buildImg()
      getAllPaths()
    });

    const buildImg = () => {
      const canvasd = new fabric.Canvas('d')
      // canvasd.set('backgroundColor', 'black'); // 设置黑色背景
      // canvas.add(getAllPaths());
      // canvas.renderAll();
    }

  </script>
</body>
</html>